

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#FF7D00',
                        neutral: '#F2F3F5',
                        'neutral-dark': '#4E5969',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
        }
    </style>
</head>
<body class="font-inter bg-white text-gray-800 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="#" class="flex items-center">
                        <i class="fa fa-code text-primary text-2xl mr-2"></i>
                        <span class="text-xl font-bold text-gray-900">WebDemo</span>
                    </a>
                    <nav class="hidden md:ml-10 md:flex space-x-8">
                        <a href="#home" class="text-primary border-b-2 border-primary px-1 pt-1 font-medium">首页</a>
                        <a href="#features" class="text-gray-500 hover:text-primary px-1 pt-1 font-medium transition-colors">特性</a>
                        <a href="#gallery" class="text-gray-500 hover:text-primary px-1 pt-1 font-medium transition-colors">图库</a>
                        <a href="#contact" class="text-gray-500 hover:text-primary px-1 pt-1 font-medium transition-colors">联系我们</a>
                    </nav>
                </div>
                <div class="hidden md:flex items-center space-x-4">
                    <button class="bg-white text-primary border border-primary rounded-lg px-4 py-2 hover:bg-primary/5 transition-colors">登录</button>
                    <button class="bg-primary text-white rounded-lg px-4 py-2 hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg">注册</button>
                </div>
                <div class="md:hidden flex items-center">
                    <button id="menu-toggle" class="text-gray-500 hover:text-primary">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="container mx-auto px-4 py-3 space-y-3">
                <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-primary bg-primary/5">首页</a>
                <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary hover:bg-primary/5">特性</a>
                <a href="#gallery" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary hover:bg-primary/5">图库</a>
                <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary hover:bg-primary/5">联系我们</a>
                <div class="flex space-x-3 pt-2">
                    <button class="w-1/2 bg-white text-primary border border-primary rounded-lg px-4 py-2 hover:bg-primary/5 transition-colors">登录</button>
                    <button class="w-1/2 bg-primary text-white rounded-lg px-4 py-2 hover:bg-primary/90 transition-colors">注册</button>
                </div>
            </div>
        </div>
    </header>

    <main class="flex-grow">
        <!-- 英雄区 -->
        <section id="home" class="relative bg-gradient-to-br from-primary/95 to-primary py-20 md:py-32 overflow-hidden">
            <div class="absolute inset-0 overflow-hidden">
                <div class="absolute top-0 right-0 w-full h-full opacity-10">
                    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                        <path fill="#FFFFFF" d="M40.8,-70.4C52.2,-63.7,63.6,-54.6,70.9,-42.9C78.2,-31.3,81.4,-17.1,80.7,-2.6C80,-11.9,75.4,-23.8,67.6,-33.4C59.9,-43,49,-50.3,37.6,-56.4C26.2,-62.4,14.3,-67.3,0.9,-69.9C-12.5,-72.6,-25.9,-72.9,-38.6,-68.9C-51.3,-64.9,-63.3,-56.6,-70.6,-44.8C-77.9,-33,-80.6,-17.7,-78.6,-2.4C-76.6,12.9,-69.9,25.8,-59.9,35.6C-49.9,45.4,-36.6,52.1,-23.4,56.2C-10.2,60.3,2.6,61.8,15.6,60.8C28.6,59.8,41.8,56.3,53.1,49.4C64.4,42.4,73.8,32.1,79.6,19.7C85.3,7.3,87.5,-7.1,84.4,-21.5C81.3,-35.9,72.8,-50.3,60.6,-59.8C48.4,-69.3,32.5,-73.9,16.4,-76.4C0.3,-78.9,-15.4,-79.3,-29.6,-75.8C-43.8,-72.3,-56.6,-64.9,-66.5,-53.7C-76.4,-42.5,-83.3,-27.5,-85.1,-11.7C-86.9,4.1,-83.6,20.6,-76.3,34.3C-69,48,-57.7,58.9,-44.9,65.4C-32.1,71.9,-18,-74.1,-1.3,-76.1C15.4,-78.1,30.8,-75.2,42.7,-68.2Z" transform="translate(100 100)" />
                    </svg>
                </div>
            </div>
            <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 text-center md:text-left mb-10 md:mb-0">
                        <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-white leading-tight text-shadow">
                            创造令人惊叹的 <br>
                            <span class="text-yellow-300">网页体验</span>
                        </h1>
                        <p class="mt-6 text-lg md:text-xl text-white/90 max-w-xl mx-auto md:mx-0">
                            我们提供专业的前端解决方案，帮助您打造视觉震撼、交互流畅的现代网站，满足各种业务需求。
                        </p>
                        <div class="mt-8 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center md:justify-start">
                            <button class="bg-white text-primary rounded-lg px-8 py-3 font-medium shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
                                了解更多 <i class="fa fa-arrow-right ml-2"></i>
                            </button>
                            <button class="bg-transparent border-2 border-white text-white rounded-lg px-8 py-3 font-medium hover:bg-white/10 transition-all">
                                <i class="fa fa-play-circle mr-2"></i> 观看演示
                            </button>
                        </div>
                    </div>
                    <div class="md:w-1/2 flex justify-center">
                        <div class="relative w-full max-w-md">
                            <div class="absolute -inset-1 bg-gradient-to-r from-primary/50 to-secondary/50 rounded-xl blur opacity-70 animate-pulse"></div>
                            <div class="relative bg-white rounded-xl overflow-hidden shadow-2xl">
                                <img src="https://picsum.photos/id/26/600/400" alt="精美网页设计展示" class="w-full h-auto">
                                <div class="p-6">
                                    <h3 class="font-bold text-xl text-gray-900">现代网站设计</h3>
                                    <p class="text-gray-600 mt-2">响应式布局，流畅动画，为您的业务打造专业形象。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="absolute bottom-0 left-0 w-full overflow-hidden leading-0">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" class="w-full h-16 md:h-24">
                    <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="#ffffff"></path>
                </svg>
            </div>
        </section>

        <!-- 特性区 -->
        <section id="features" class="py-20 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-gray-900 mb-4">强大特性，简单实现</h2>
                    <p class="text-gray-600 text-lg">我们的解决方案集成了各种强大功能，帮助您轻松构建现代网站</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- 特性卡片1 -->
                    <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2 border border-gray-100 group">
                        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                            <i class="fa fa-desktop text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">响应式设计</h3>
                        <p class="text-gray-600">您的网站将在任何设备上完美展示，从手机到桌面电脑，提供一致的用户体验。</p>
                        <a href="#" class="mt-6 inline-flex items-center text-primary font-medium group-hover:underline">
                            了解更多 <i class="fa fa-long-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
                        </a>
                    </div>

                    <!-- 特性卡片2 -->
                    <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2 border border-gray-100 group">
                        <div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-secondary/20 transition-colors">
                            <i class="fa fa-bolt text-secondary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">高性能优化</h3>
                        <p class="text-gray-600">我们采用最新技术确保您的网站加载迅速，提供流畅的用户体验，降低跳出率。</p>
                        <a href="#" class="mt-6 inline-flex items-center text-primary font-medium group-hover:underline">
                            了解更多 <i class="fa fa-long-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
                        </a>
                    </div>

                    <!-- 特性卡片3 -->
                    <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2 border border-gray-100 group">
                        <div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-accent/20 transition-colors">
                            <i class="fa fa-paint-brush text-accent text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">精美UI设计</h3>
                        <p class="text-gray-600">我们提供现代化的UI设计，符合最新设计趋势，让您的网站脱颖而出。</p>
                        <a href="#" class="mt-6 inline-flex items-center text-primary font-medium group-hover:underline">
                            了解更多 <i class="fa fa-long-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
                        </a>
                    </div>

                    <!-- 特性卡片4 -->
                    <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2 border border-gray-100 group">
                        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6 group-hover:bg-green-200 transition-colors">
                            <i class="fa fa-shield text-green-600 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">安全保障</h3>
                        <p class="text-gray-600">我们的解决方案集成了多层安全防护，确保您的数据和用户信息安全无忧。</p>
                        <a href="#" class="mt-6 inline-flex items-center text-primary font-medium group-hover:underline">
                            了解更多 <i class="fa fa-long-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
                        </a>
                    </div>

                    <!-- 特性卡片5 -->
                    <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2 border border-gray-100 group">
                        <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6 group-hover:bg-purple-200 transition-colors">
                            <i class="fa fa-cogs text-purple-600 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">易于定制</h3>
                        <p class="text-gray-600">我们的代码结构清晰，文档完善，让您可以轻松根据需求进行定制和扩展。</p>
                        <a href="#" class="mt-6 inline-flex items-center text-primary font-medium group-hover:underline">
                            了解更多 <i class="fa fa-long-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
                        </a>
                    </div>

                    <!-- 特性卡片6 -->
                    <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2 border border-gray-100 group">
                        <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6 group-hover:bg-indigo-200 transition-colors">
                            <i class="fa fa-line-chart text-indigo-600 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">数据分析</h3>
                        <p class="text-gray-600">集成强大的分析工具，帮助您了解用户行为，优化网站性能和用户体验。</p>
                        <a href="#" class="mt-6 inline-flex items-center text-primary font-medium group-hover:underline">
                            了解更多 <i class="fa fa-long-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 图库区 -->
        <section id="gallery" class="py-20 bg-gray-50">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-gray-900 mb-4">精美图库</h2>
                    <p class="text-gray-600 text-lg">浏览我们精心挑选的图片集合，为您的项目寻找灵感</p>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- 图片1 -->
                    <div class="group relative overflow-hidden rounded-xl shadow-lg cursor-pointer">
                        <img src="https://picsum.photos/id/1015/600/400" alt="山脉风景" class="w-full h-80 object-cover object-center transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                            <div class="p-6">
                                <h3 class="text-white text-xl font-bold">壮丽山脉</h3>
                                <p class="text-white/80 mt-2">探索大自然的壮丽景色</p>
                            </div>
                        </div>
                    </div>

                    <!-- 图片2 -->
                    <div class="group relative overflow-hidden rounded-xl shadow-lg cursor-pointer">
                        <img src="https://picsum.photos/id/1016/600/400" alt="湖泊风景" class="w-full h-80 object-cover object-center transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                            <div class="p-6">
                                <h3 class="text-white text-xl font-bold">宁静湖泊</h3>
                                <p class="text-white/80 mt-2">享受宁静的湖泊时光</p>
                            </div>
                        </div>
                    </div>

                    <!-- 图片3 -->
                    <div class="group relative overflow-hidden rounded-xl shadow-lg cursor-pointer">
                        <img src="https://picsum.photos/id/1018/600/400" alt="森林风景" class="w-full h-80 object-cover object-center transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                            <div class="p-6">
                                <h3 class="text-white text-xl font-bold">神秘森林</h3>
                                <p class="text-white/80 mt-2">探索森林深处的奥秘</p>
                            </div>
                        </div>
                    </div>

                    <!-- 图片4 -->
                    <div class="group relative overflow-hidden rounded-xl shadow-lg cursor-pointer">
                        <img src="https://picsum.photos/id/1019/600/400" alt="海洋风景" class="w-full h-80 object-cover object-center transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                            <div class="p-6">
                                <h3 class="text-white text-xl font-bold">蔚蓝海洋</h3>
                                <p class="text-white/80 mt-2">感受海洋的无限魅力</p>
                            </div>
                        </div>
                    </div>

                    <!-- 图片5 -->
                    <div class="group relative overflow-hidden rounded-xl shadow-lg cursor-pointer">
                        <img src="https://picsum.photos/id/1039/600/400" alt="城市风景" class="w-full h-80 object-cover object-center transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                            <div class="p-6">
                                <h3 class="text-white text-xl font-bold">城市风光</h3>
                                <p class="text-white/80 mt-2">现代城市的繁华景象</p>
                            </div>
                        </div>
                    </div>

                    <!-- 图片6 -->
                    <div class="group relative overflow-hidden rounded-xl shadow-lg cursor-pointer">
                        <img src="https://picsum.photos/id/1043/600/400" alt="乡村风景" class="w-full h-80 object-cover object-center transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                            <div class="p-6">
                                <h3 class="text-white text-xl font-bold">乡村生活</h3>
                                <p class="text-white/80 mt-2">体验宁静的乡村生活</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-center mt-12">
                    <button class="bg-primary text-white rounded-lg px-8 py-3 font-medium shadow-md hover:bg-primary/90 transition-all transform hover:-translate-y-1">
                        加载更多 <i class="fa fa-refresh ml-2"></i>
                    </button>
                </div>
            </div>
        </section>

        <!-- 联系区 -->
        <section id="contact" class="py-20 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-6xl mx-auto">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                        <div>
                            <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-gray-900 mb-4">联系我们</h2>
                            <p class="text-gray-600 text-lg mb-8">有任何问题或建议？请填写表单与我们联系，我们将尽快回复您。</p>

                            <div class="space-y-6">
                                <div class="flex items-start">
                                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                        <i class="fa fa-map-marker text-primary"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-lg font-medium text-gray-900">地址</h3>
                                        <p class="text-gray-600 mt-1">北京市海淀区中关村科技园区8号楼</p>
                                    </div>
                                </div>

                                <div class="flex items-start">
                                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                        <i class="fa fa-phone text-primary"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-lg font-medium text-gray-900">电话</h3>
                                        <p class="text-gray-600 mt-1">+86 10 8888 8888</p>
                                    </div>
                                </div>

                                <div class="flex items-start">
                                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                        <i class="fa fa-envelope text-primary"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-lg font-medium text-gray-900">邮箱</h3>
                                        <p class="text-gray-600 mt-1">contact@example.com</p>
                                    </div>
                                </div>

                                <div class="flex items-start">
                                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                        <i class="fa fa-clock-o text-primary"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-lg font-medium text-gray-900">工作时间</h3>
                                        <p class="text-gray-600 mt-1">周一至周五: 9:00 - 18:00</p>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-8 flex space-x-4">
                                <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-primary hover:text-white transition-colors">
                                    <i class="fa fa-weixin"></i>
                                </a>
                                <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-primary hover:text-white transition-colors">
                                    <i class="fa fa-weibo"></i>
                                </a>
                                <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-primary hover:text-white transition-colors">
                                    <i class="fa fa-github"></i>
                                </a>
                                <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-primary hover:text-white transition-colors">
                                    <i class="fa fa-linkedin"></i>
                                </a>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-xl p-8 border border-gray-100">
                            <form>
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
                                    <div>
                                        <label for="name" class="block text-gray-700 font-medium mb-2">姓名</label>
                                        <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入您的姓名">
                                    </div>
                                    <div>
                                        <label for="email" class="block text-gray-700 font-medium mb-2">邮箱</label>
                                        <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入您的邮箱">
                                    </div>
                                </div>

                                <div class="mb-6">
                                    <label for="subject" class="block text-gray-700 font-medium mb-2">主题</label>
                                    <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入主题">
                                </div>

                                <div class="mb-6">
                                    <label for="message" class="block text-gray-700 font-medium mb-2">留言</label>
                                    <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入您的留言内容"></textarea>
                                </div>

                                <div class="flex items-center mb-6">
                                    <input id="privacy" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                    <label for="privacy" class="ml-2 block text-sm text-gray-600">
                                        我同意隐私政策和条款
                                    </label>
                                </div>

                                <button type="submit" class="w-full bg-primary text-white rounded-lg px-6 py-3 font-medium shadow-md hover:bg-primary/90 transition-all transform hover:-translate-y-1">
                                    发送消息 <i class="fa fa-paper-plane ml-2"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center mb-6">
                        <i class="fa fa-code text-primary text-2xl mr-2"></i>
                        <span class="text-xl font-bold">WebDemo</span>
                    </div>
                    <p class="text-gray-400 mb-6">我们致力于提供高质量的前端解决方案，帮助您打造令人印象深刻的网站体验。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-linkedin"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="text-lg font-semibold mb-6">快速链接</h3>
                    <ul class="space-y-3">
                        <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#features" class="text-gray-400 hover:text-white transition-colors">特性</a></li>
                        <li><a href="#gallery" class="text-gray-400 hover:text-white transition-colors">图库</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">服务条款</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-semibold mb-6">服务</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">网站设计</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">前端开发</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">UI/UX设计</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">响应式开发</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">网站优化</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">维护支持</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-semibold mb-6">订阅通讯</h3>
                    <p class="text-gray-400 mb-4">订阅我们的通讯，获取最新的设计趋势和开发技巧。</p>
                    <form class="mb-4">
                        <div class="flex">
                            <input type="email" placeholder="您的邮箱地址" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-gray-900">
                            <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors">
                                <i class="fa fa-paper-plane"></i>
                            </button>
                        </div>
                    </form>
                    <p class="text-gray-500 text-sm">我们尊重您的隐私，不会向第三方分享您的信息。</p>
                </div>
            </div>

            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-500 text-sm">© 2025 WebDemo. 保留所有权利。</p>
                    <div class="flex space-x-6 mt-4 md:mt-0">
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">隐私政策</a>
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">服务条款</a>
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">Cookie政策</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 10) {
                navbar.classList.add('shadow-md');
                navbar.classList.add('bg-white');
                navbar.classList.remove('bg-white/90');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.remove('bg-white');
                navbar.classList.add('bg-white/90');
            }
        });

        // 移动端菜单切换
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    // 关闭移动端菜单
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });

        // 图片懒加载AAA
        document.addEventListener("DOMContentLoaded", function() {
            const lazyImages = [].slice.call(document.querySelectorAll("img"));
            
            if ("IntersectionObserver" in window) {
                let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            let lazyImage = entry.target;
                            lazyImage.src = lazyImage.dataset.src;
                            lazyImageObserver.unobserve(lazyImage);
                        }
                    });
                });
                
                lazyImages.forEach(function(lazyImage) {
                    lazyImageObserver.observe(lazyImage);
                });
            }
        });
    </script>
</body>
</html>
    